<template>
  <div v-if="!$store.state.user.pulling_info">
    <div class="login-container">
      <div class="login-box">
        <div class="login-title">登录</div>
        <div class="login-form">
          <form>
            <!-- 用户名输入框 -->
            <div class="form-item">
              <input
                id="username"
                class="form-input"
                type="text"
                placeholder=""
                v-model="username"
              />
              <label class="input-label">邮箱</label>
            </div>
            <!-- 密码输入框 -->
            <div class="form-item">
              <input
                id="password"
                class="form-input"
                type="password"
                placeholder=""
                v-model="password"
              />
              <label class="input-label">密码</label>
            </div>
            <!-- 忘记密码链接 -->
            <div class="forgot-password">
              <a href="#" @click.prevent="handleForgotPassword">忘记密码</a>
            </div>

            <!-- 登录按钮 -->
            <div class="form-item">
              <button type="button" class="login-btn" @click="handleLogin">
                登录
              </button>
            </div>
            <!-- <div class="error_message">{{ error_message }}</div> -->
            <!-- 没有账号去注册链接 -->
            <div class="no-account">
              <span>没有账号？</span>
              <a href="#" type="button" @click.prevent="handleGoToRegister"
                >去注册</a
              >
            </div>

            <el-divider />

            <div class="third-party-login">
              <button type="button" class="qq-login-btn social-login-btn">
                <img
                  src="https://cdn.acwing.com/media/article/image/2024/12/28/134627_db82e95bc5-qq-icon.png"
                  alt="QQ图标"
                />
                QQ登录
              </button>
              <button type="button" class="wechat-login-btn social-login-btn">
                <img
                  src="https://cdn.acwing.com/media/article/image/2024/12/28/134627_e1080a82c5-8d89855e32e9cc5ae307f0cf0bed4faf.png"
                  alt="微信图标"
                />
                微信登录
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import ContentFiled from "@/components/ContentFiled.vue";
import { useStore } from "vuex";
import { ref, onUnmounted } from "vue";
import router from "@/router";
import { ElMessage } from "element-plus";
// import { useRouter } from "vue-router";

export default {
  components: {
    // ContentFiled,
  },

  setup() {
    const store = useStore();
    let username = ref("");
    let password = ref("");

    username.value = store.state.user.email;
    password.value = store.state.user.password;

    const jwt_token = localStorage.getItem("jwt_token");
    if (jwt_token) {

      store.commit("updateToken", jwt_token);
      store.dispatch("getInfo", {
        success() {
          console.log("getInfo成功");
          router.push({ name: "home" });
          store.commit("updatePullingInfo", false);
        },
        error() {
          store.commit("updatePullingInfo", false);
        },
      });
    } else {
      store.commit("updatePullingInfo", false);
    }

    const handleLogin = () => {
      store.dispatch("login", {
        username: username.value,
        password: password.value,
        success() {
          store.dispatch("getInfo", {
            success() {
              router.push({ name: "home" });
              // console.log(store.state.user);
            },
            error() {},
          });
        },
        error(resp) {
          // error_message.value = "用户名或密码错误";
          ElMessage.error(resp);
        },
      });
    };
    const handleForgotPassword = () => {
      router.push("/user/account/forget");
      // 在这里处理忘记密码逻辑
      console.log("用户点击了忘记密码");
    };
    const handleGoToRegister = () => {
      // 在这里处理跳转到注册页面的逻辑
      console.log("用户点击了去注册");
      router.push("/user/account/register");
    };

    onUnmounted(() => {
      // socket.close();
      store.commit("updatePassword", "");
    });

    return {
      username,
      password,
      handleLogin,
      handleForgotPassword,
      handleGoToRegister,
    };
  },
};
</script>

<style scoped>
div.error_message {
  color: red;
}
/* 页面居中样式 */
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f7f7f7;
}

.login-box {
  width: 400px;
  background-color: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(5, 5, 5, 0.11);
}

.login-title {
  text-align: center;
  font-size: 30px;
  margin-bottom: 20px;
  font-weight: 800;
}

/* 登录表单样式 */
.login-form .form-item {
  margin-bottom: 20px;
}

.form-item {
  position: relative;
}

.input-label {
  position: absolute;
  font-size: 15px;
  top: 55%;
  left: 10px;
  transform: translateY(-50%);
  background-color: white; /* 防止标签遮挡输入文字 */
  color: #aaa;
  pointer-events: none; /* 确保点击标签不会干扰输入框 */
  transition: all 0.1s ease;
}

.form-input:focus + .input-label,
.form-input:not(:placeholder-shown) + .input-label {
  top: 5%;
  font-size: 15px;
  font-weight: bold;
  color: #007bff; /* 改变颜色以突出显示 */
}
.form-input {
  width: 100%;
  height: 55px;
  padding: 20px 20px 20px 10px; /*上右下左*/
  margin-top: 5px;
  box-sizing: border-box; /* 确保宽度包含 padding 和 border */
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  transition: all 0.3s ease;
}

.form-input:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  outline: none;
}

.form-input::placeholder {
  color: #aaa;
}

.forgot-password {
  text-align: right;
  margin-bottom: 10px;
}

.forgot-password a {
  color: #007bff;
  text-decoration: none;
  font-size: 14px;
}

.forgot-password a:hover {
  text-decoration: underline;
}

.no-account {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
}

.no-account a {
  color: #007bff;
  text-decoration: none;
  font-weight: bold;
}

.no-account a:hover {
  text-decoration: underline;
}

/* 登录按钮 */
.login-btn {
  width: 100%;
  padding: 12px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.login-btn:hover {
  background-color: #0056b3;
}

.login-btn:focus {
  outline: none;
}

/* 第三方登录按钮通用样式 */
.social-login-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
  text-decoration: none;
  color: white; /* 默认文字颜色为白色 */
}

.social-login-btn:hover {
  opacity: 0.9;
}

.social-login-btn img {
  height: 20px; /* 根据实际图标大小调整 */
  margin-right: 8px; /* 图标与文本之间的间距 */
  vertical-align: middle;
}

/* QQ 登录按钮样式 */
.qq-login-btn {
  background-color: #2ea7e0; /* QQ 蓝色 */
  margin-bottom: 20px;
}

.qq-login-btn :hover {
  background-color: #2ea7e0; /* QQ 蓝色 */
}

/* 微信登录按钮样式 */
.wechat-login-btn {
  background-color: #5bd35b; /* 微信绿色 */
}
.wechat-login-btn :hover {
  background-color: #25d125; /* 微信绿色 */
}
</style>
